<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>无标题文档</title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script src="bootstrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" debug="css" d:href="css/debug.css">
        <script src="struct/header.js" x-id="header" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    </head>
    <body>
        <!-- <script>
            var a_idx = 0;
            jQuery(document).ready(function($) {
                addTips = function(e) {
                    var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信",
                        "友善");
                    var i = $("<span />").text(a[a_idx]);
                    a_idx = (a_idx + 1) % a.length;
                    var x = e.pageX,
                        y = e.pageY;
                    i.css({
                        "z-index": 9999999999999999,
                        "top": y - 20,
                        "left": x,
                        "position": "absolute",
                        "font-weight": "bold",
                        "color": "#ff6651"
                    });

                    $("body").append(i);
                    i.animate({
                        "top": y - 180,
                        "opacity": 0
                    }, 1500, function() {
                        i.remove()
                    })
                    return false;
                }
                //绑定鼠标左键
                $("body").click(addTips);
                //绑定鼠标左键
                $("body").bind("contextmenu", addTips)
            });
        </script> -->
        <script>
            let canvasWidth;
            let canvasHeight;

            function getAttribute(object, name, normal) {
                return object.getAttribute(name) || normal
            }

            function findAllElement(i) {
                return document.getElementsByTagName(i)
            }

            function attr() {
                var element = findAllElement("script");
                var _length = element.length;
                var lastElement = element[_length - 1];
                return {
                    length: _length,
                    zIndex: getAttribute(lastElement, "zIndex", -1),
                    opacity: getAttribute(lastElement, "opacity", 0.5),
                    color: getAttribute(lastElement, "color", "0,0,0"),
                    count: getAttribute(lastElement, "count", 999)
                }
            }

            function initWidthAndHeight() {
                canvasWidth = canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body
                    .clientWidth;
                canvasHeight = canvas.height = window.innerHeight || document.documentElement.clientHeight || document
                    .body.clientHeight;
            }

            function startAnime() {
                context.clearRect(0, 0, canvasWidth, canvasHeight);
                var pointList = [cursor].concat(newPoint);
                newPoint.forEach(function(iPoint) {
                    iPoint.x += iPoint.xa;
                    iPoint.y += iPoint.ya;
                    iPoint.xa *= (iPoint.x > canvasWidth || iPoint.x < 0) ? -1 : 1;
                    iPoint.ya *= (iPoint.y > canvasHeight || iPoint.y < 0) ? -1 : 1;
                    context.fillRect(iPoint.x - 0.5, iPoint.y - 0.5, 1, 1);
                    for (let j = 0; j < pointList.length; j++) {
                        let jPoint = pointList[j];
                        if (iPoint !== jPoint && jPoint.x !== null && jPoint.y !== null) {
                            let deltaX = iPoint.x - jPoint.x;
                            let deltaY = iPoint.y - jPoint.y;
                            let moduleXY = deltaX * deltaX + deltaY * deltaY;
                            moduleXY < jPoint.max && (
                                jPoint === cursor &&
                                moduleXY >= jPoint.max / 2 &&
                                (iPoint.x -= 0.03 * deltaX, iPoint.y -= 0.03 * deltaY));
                            let a = (jPoint.max - moduleXY) / jPoint.max;
                            if (a <= 0) continue;
                            context.beginPath();
                            context.lineWidth = a / 2;
                            context.strokeStyle = "rgba(" + nowAttr.color + "," + (a + 0.2) + ")";
                            context.moveTo(iPoint.x, iPoint.y);
                            context.lineTo(jPoint.x, jPoint.y);
                            context.stroke();
                        }
                    }
                    pointList.splice(pointList.indexOf(iPoint), 1)
                });
                AnimationFrame(startAnime);
            }
            var canvas = document.createElement("canvas");
            var nowAttr = attr();
            var canvasID = "c_n" + nowAttr.length;
            var context = canvas.getContext("2d");
            var r;
            var n;
            var AnimationFrame =
                window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function(i) {
                    window.setTimeout(i, 1000 / 45)
                };
            var random = Math.random;
            var cursor = {
                x: null,
                y: null,
                max: 20000
            };
            canvas.className = "particle_canvas";
            var browserName = navigator.userAgent.toLowerCase();
            if (/msie/i.test(browserName) && !/opera/.test(browserName)) {
                canvas.className += ' ie10_gte';
            };
            canvas.id = canvasID;
            canvas.style.cssText =
                "position:fixed; top:0; left:0; z-index:" + nowAttr.zIndex +
                "; opacity:" + nowAttr.opacity;
            findAllElement("body")[0].appendChild(canvas);
            initWidthAndHeight();
            window.onresize = initWidthAndHeight;
            window.onmousemove = function(e) {
                e = e || window.event;
                cursor.x = e.clientX;
                cursor.y = e.clientY;
            };
            window.onmouseout = function() {
                cursor.x = null;
                cursor.y = null
            };
            for (var newPoint = [], p = 0; nowAttr.count > p; p++) {
                var h = random() * canvasWidth;
                var g = random() * canvasHeight;
                var q = 2 * random() - 1;
                var d = 2 * random() - 1;
                newPoint.push({
                    x: h,
                    y: g,
                    xa: q,
                    ya: d,
                    max: 6000
                })
            }
            setTimeout(function() {
                startAnime()
            }, 250)
        </script>
        <style>
            .github-corner:hover .octo-arm {
                animation: octocat-wave 560ms ease-in-out
            }

            @keyframes octocat-wave {

                0%,
                100% {
                    transform: rotate(0)
                }

                20%,
                60% {
                    transform: rotate(-25deg)
                }

                40%,
                80% {
                    transform: rotate(10deg)
                }
            }

            @media (max-width:500px) {
                .github-corner:hover .octo-arm {
                    animation: none
                }

                .github-corner .octo-arm {
                    animation: octocat-wave 560ms ease-in-out
                }
            }
        </style>
    </body>
</html>
